<template>
  <div style="padding:10px">
    <draggable
        v-model="items"
        v-bind="{group:'searchConfig', ghostClass: 'ghost',animation: 200}"
        class="widget-form-list"
        handle=".config-move"
      >
        <div class="config-options margin-bottom-sm" v-for="(opt,o) in items" :key="o">
          <i class="designer-icon config-move" style="font-size: 20px;cursor:move;">&#xe627;</i>
          <span class="margin-left-lg" style="font-size:22px;">{{opt.label}}</span>
          <i
            class="designer-icon margin-left-lg"
            @click="editOpt(opt,o)"
            style="cursor:pointer;font-size: 20px;color: #f5222d">&#xe60e;</i>
            <i
            class="designer-icon margin-left-lg"
            @click="delOpt(opt,o)"
            style="cursor:pointer;font-size: 22px;color: #f5222d">&#xe665;</i>
        </div>
      </draggable>
      <div class="margin-left-xxl margin-tb-lg">
        <a
          @click="addOptions()"
          class="designer-icon">&#xe655;添加条件</a>
      </div>
      <search-add ref="searchAdd" @success="success"/>
  </div>
</template>
<script>
import searchAdd from './searchAdd.vue'
export default {
  components: { searchAdd },
  props: {
    searchItems: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      items: this.searchItems
    }
  },
  watch: {
    items(v) {
      this.$emit('itemsChange', v)
    }
  },
  created() {},
  mounted() {},
  methods: {
    initSearch(items) {
      this.items = items
    },
    addOptions() {
      this.$refs.searchAdd.showModal()
    },
    editOpt(item, idx) {
      this.$refs.searchAdd.showModal(item, idx)
    },
    delOpt(item, idx) {
      this.items.splice(idx, 1)
    },
    success(item, idx) {
      console.log(item, idx)
      if (idx > -1) {
        this.items[idx] = item
        this.items = JSON.parse(JSON.stringify(this.items))
      } else {
        this.items.push(item)
      }
    }
  }
}
</script>
<style></style>
